/**
 * 功能描述: 通知提醒框样式表
 * @author 崔孝楠
 * @date 2022/10/6 22:53
 * @version 1.0
 */
@import '../../style/index';

// 通知提醒框整体布局
@mixin notification--layout {
  box-sizing: border-box;
  margin: 0 24px 0 0;
  padding: 0;
  position: fixed;
  z-index: $index-top;
}

// 通知框布局
@mixin notification-notice--layout {
  position: relative;
  width: 384px;
  max-width: calc(100vw - 48px);
  margin-bottom: 16px;
  margin-left: auto;
  padding: 16px 24px;
  overflow: hidden;
  line-height: $line-height-base;
}

// 通知标题布局
@mixin notification-notice-message--layout {
  margin-bottom: 8px;
  line-height: 24px;
}

// 添加提醒图标时布局
@mixin notification-notice-with-icon--layout {
  // 通知标题布局
  @include b(notification-notice-message) {
    margin-bottom: 4px;
    margin-left: 48px;
  }
  // 通知详情布局
  @include b(notification-notice-description) {
    margin-left: 48px;
  }
  // 通知图标布局
  @include b(notification-notice-icon) {
    position: absolute;
    margin-left: 4px;
    line-height: 24px;
    width: 1em;
    height: 1em;
  }
}

// 关闭按钮样式
@mixin notification-notice-close--layout {
  position: absolute;
  top: 16px;
  right: 22px;
  // 按钮图标
  @include b(notification-close-icon) {
    width: 1em;
    height: 1em;
  }
}

// 通知提醒框整体样式
@include b(notification) {
  color: $color-text-primary;
  font-size: $font-size-base;
  font-variant: tabular-nums;
  line-height: $line-height-base;
  list-style: none;
  font-feature-settings: "tnum";
  @include notification--layout;
}

// 通知框样式
@include b(notification-notice) {
  word-wrap: break-word;
  background: $color-white;
  border-radius: $border-radius-base;
  box-shadow: 0 3px 6px -4px #0000001f,0 6px 16px #00000014,0 9px 28px 8px #0000000d;
  @include notification-notice--layout;
}

// 通知标题样式
@include b(notification-notice-message) {
  color: $color-text-primary;
  font-size: $font-size-medium;
  @include notification-notice-message--layout;
}

// 添加提醒图标时样式
@include b(notification-notice-with-icon) {
  @include notification-notice-with-icon--layout;
  // 通知标题样式
  @include b(notification-notice-message) {
    font-size: $font-size-medium;
  }
  // 通知详情样式
  @include b(notification-notice-description) {
    font-size: $font-size-base;
  }
  // 通知图标样式
  @include b(notification-notice-icon) {
    font-size: 24px;
  }
}

// 成功图标
@include b(notification-notice-icon-success) {
  @include b(notification-notice-icon) {
    color: $success-icon-color;
  }
}

// 信息图标
@include b(notification-notice-icon-info) {
  @include b(notification-notice-icon) {
    color: $info-icon-color;
  }
}

// 提醒图标
@include b(notification-notice-icon-warning) {
  @include b(notification-notice-icon) {
    color: $warning-icon-color;
  }
}

// 错误图标
@include b(notification-notice-icon-error) {
  @include b(notification-notice-icon) {
    color: $error-icon-color;
  }
}

// 关闭按钮样式
@include b(notification-notice-close) {
  color: $close-icon-color;
  outline: none;
  border: transparent;
  background-color: transparent;
  @include notification-notice-close--layout;
  // 悬浮时关闭按钮颜色
  &:hover {
    color: $color-text-primary;
  }
}

// 右上布局
@include b(notification-topRight) {
  right: 0px;
  top: 24px;
  bottom: auto;
}

// 左上布局
@include b(notification-topLeft) {
  left: 0px;
  top: 24px;
  bottom: auto;
}

// 右下布局
@include b(notification-bottomRight) {
  right: 0px;
  bottom: 24px;
  top: auto;
}

// 左下布局
@include b(notification-bottomLeft) {
  left: 0px;
  bottom: 24px;
  top: auto;
}
